<template>
    <div class="app-container">
        <el-card shadow="hover">
            <template>
                <div class="home">
                    <!-- 个人信息表 -->
                    <div class="left_pic">
                        <el-card class="chart-card">
                            <div slot="header">
                                <h3 class="chart-title">个人信息表</h3>
                            </div>
                            <div>
                                <el-form ref="form" :model="stuform" label-width="80px">
                                    <el-form-item label="学号">
                                        <el-input v-model="stuform.studentId" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="姓名">
                                        <el-input v-model="stuform.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="性别">
                                        <el-input v-model="stuform.gender"></el-input>
                                    </el-form-item>
                                    <el-form-item label="年龄">
                                        <el-input v-model="stuform.age"></el-input>
                                    </el-form-item>
                                    <el-form-item label="学院">
                                        <el-input v-model="stuform.college"></el-input>
                                    </el-form-item>
                                    <el-form-item label="专业">
                                        <el-input v-model="stuform.major"></el-input>
                                    </el-form-item>
                                    <el-form-item label="班级">
                                        <el-input v-model="stuform.stuclass"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电话">
                                        <el-input v-model="stuform.phone"></el-input>
                                    </el-form-item>
                                    <el-form-item label="岗位">
                                        <el-input v-model="stuform.jobName" :disabled="true"></el-input>
                                    </el-form-item>
                                    <el-form-item label="状态">
                                        <el-tag size="small" v-model="stuform.qingongjianxueStatus">{{
                                            stuform.qingongjianxueStatus }}</el-tag>
                                        <!-- <el-input v-model="stuform.qingongjianxueStatus"></el-input> -->
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="updateStudentInfo">修改个人信息</el-button>
                                        <!-- <el-button @click="stuPasswordDialog = true">修改账号密码</el-button> -->
                                    </el-form-item>

                                </el-form>
                            </div>
                        </el-card>
                    </div>
                    <div class="right">
                        <!-- 校历 -->
                        <div class="line_box">
                            <el-card class="chart-card">
                                <div slot="header">
                                    <h3 class="chart-title">校历</h3>
                                </div>
                                <el-calendar v-model="calendarvalue">
                                </el-calendar>
                            </el-card>
                        </div>
                    </div>

                </div>
            </template>
        </el-card>
        <!-- <el-dialog title="修改登录信息" :visible.sync="stuPasswordDialog">
            <el-form :model="passWordForm">
                <el-form-item label="手机号">
                    <el-input v-model="passWordForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="passWordForm.password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="stuPasswordDialog = false">取 消</el-button>
                <el-button type="primary" @click="upDatePassWord">确 定</el-button>
            </div>
        </el-dialog> -->

    </div>
</template>

<script>
import jobApi from '@/api/job'
export default {
    data() {
        return {
            calendarvalue: new Date(),
            stuform: {},
            stuId: "",
            stuPasswordDialog: false,
            passWordForm: {
            //   createTime: "2023-05-13T14:55:57.045Z",
            //   email: "string",
            //   id:,
            //   name: ,
            //   password: "",
            //   phone: "string",
            //   sex: false,
            //   status: false,
            //   updateTime: "2023-05-13T14:55:57.045Z",
            //   username: "student"
            }
        };
    },
    mounted() {
        this.getStuInformation()
    },
    methods: {
        getStuInformation() {
            const id = localStorage.getItem('userId')
            const phone = localStorage.getItem('userPhone')
            // getStudentInfo
            jobApi.getStudentInfo(phone)
                .then(res => {
                    console.log(11111, res)
                    this.stuform = res.data.stu[0]
                    console.log("22students22", this.stuform)
                })
                .catch(error => {
                    console.log(error)
                })
            // jobApi.getStudent(id)
            //     .then(res => {
            //         console.log(11111, res)
            //         this.stuform = res.data.student
            //         console.log("22students22", this.stuform)
            //     })
            //     .catch(error => {
            //         console.log(error)
            //     })
        },
        updateStudentInfo() {
            this.$confirm('此操作将修改学生记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                jobApi.updateStudent(this.stuform)
                    .then((res) => {
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        })
                    })
            }).catch(() => {
                this.$message({
                    type: 'success',
                    message: '修改取消'
                })
            })
        },
        // upDatePassWord() {

        // }

    },
    computed: {

    }
}

</script>

<style >
.home {
    display: flex;
    justify-content: space-between;
    width: 100%;

}

.line_box {
    width: 100%;
    height: auto;
}

.right {
    width: 49%;
    height: auto;
}

.left_pic {
    width: 49%;
    height: auto;
}

.stuInformationBox {
    display: flex;
    justify-content: space-around;

}

.stuform {
    width: 48%;
}

.calender {
    width: 48%;
}
</style>

